<template>
	<view>
		<view class="titName">积分说明</view>
		<view class="noteBox">
			<u-parse :content="content"></u-parse>
		</view>
		<view class="titName">购买积分</view>
		<view class="lintegralBox">
			<view @click="cklintegral(item.id)" class="lintegral" :class="inck==item.id?'lintegralck':''"
				v-for="(item,index) in lintegral">
				<view class="desc">{{item.name}}</view>
				<view class="price"><text>￥</text>{{item.price}}</view>
			</view>
		</view>
		<view class="ubtns">
			<u-button style="margin: 150rpx 25rpx 0;width: 700rpx;" @click="API_buy()" color="#302C29" shape="circle"
				text="立即购买"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inck: 1,
				content: '<img src = "https://phantombody.oss-cn-shanghai.aliyuncs.com/6642e4c3355685a5900861489749f9fcd416adb6939e28181ed60e18d5163fb0.png" / > ',
				lintegral: []
			}
		},
		onLoad() {
			this.API_user();
		},
		methods: {
			cklintegral(id) {
				this.inck = id
			},
			API_buy() {
				var that = this;
				that.ran
					.request('/app-api/trade/order-ht/create-score-template', {
						"scoreTeamplateId": that.inck
					}, 'POST')
					.then(res => {
						console.log(res);
						if (res.code == 200) { // 下单成功 ，请求支付
							// 
							var openId = uni.getStorageSync('openid');
							let payOrderId = res.data.payOrderId
							that.ran
								.request('/app-api/pay/order/submitWxMiniPayParam', {
									"id": res.data.payOrderId,
									"channelCode": "wx_lite",
									"channelExtras": {
										"openid": openId
									}
								}, 'POST')
								.then(res => {
									console.log(res);
									if (res.code == 200) { // 下单成功 ，请求支付
										// submitWxMiniPayParam  
										let displayContent = JSON.parse(res.data.displayContent)
										uni.requestPayment({
											provider: 'wxpay',
											timeStamp: displayContent.timeStamp,
											nonceStr: displayContent.nonceStr,
											package: displayContent.packageValue,
											signType: displayContent.signType,
											paySign: displayContent.paySign,
											success: (res) => {
												uni.redirectTo({
													url:'/pages/mine/sucessful?type=1'
												})
												console.log(res)
											},
											fail: (err) => {console.log(err)
												uni.redirectTo({
													url:'/pages/mine/sucessful?type=2'
												})
											}
										});
										
										
									}
								});
						}
					});
			},
			API_user() {
				var that = this;
				that.ran
					.request('/app-api/member/score-template/simple-all-list', {}, 'GET')
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							that.lintegral = res.data;
							if (that.lintegral && that.lintegral[0]) {
								that.inck = that.lintegral[0].id
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
		}
	}
</script>

<style lang="scss">
	.ubtns {
		margin: 150rpx 25rpx 0;
		width: 700rpx;
	}

	.lintegralBox {
		display: flex;
		margin: 10rpx 25rpx 50rpx;

		.lintegralck {
			border: 4rpx solid #302C29 !important;
		}

		.lintegral {
			flex: 1;
			text-align: center;
			margin: 0 20rpx;
			border-radius: 20rpx;
			padding: 20rpx 0;
			border: 4rpx solid #fff;

			.desc {
				line-height: 60rpx;
				color: #666;
			}

			.price {
				font-weight: bold;
				font-size: 40rpx;

				text {
					font-size: 22rpx
				}
			}
		}

		.lintegral:nth-child(1) {
			background-image: linear-gradient(to right, #FFE9D0, #FCB7A0);
		}

		.lintegral:nth-child(2) {
			background-image: linear-gradient(to right, #FED0ED, #FF9B9F);
		}

		.lintegral:nth-child(3) {
			background-image: linear-gradient(to right, #A8C1EE, #F8C2EB);
		}
	}

	.noteBox {
		margin: 0 25rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		color: #ce8900;
		line-height: 1.5;
		background-image: linear-gradient(to right, #FCFAF8, #E2D2C4);
	}

	.titName {
		padding: 25rpx;
		margin-left: 25rpx;
		font-weight: bold;
		// text-indent: 30rpx;
	}

	.titName::before {
		content: '';
		position: absolute;
		margin-top: 5rpx;
		left: 25rpx;
		width: 10rpx;
		height: 36rpx;
		background: #302C29;
	}
</style>